@extends('layouts.header')
@section('title','设备报修')
@section('content')
    <div class="deviceService">
        <div class="malfunction">
            <div class="malfunctionTitle">请选择故障类型 <span>*</span></div>
            <div class="malfunctionArea malfunctionOne" id="malfunctionOne">
                @foreach($faultTypes as $faultType)
                    <div @if($loop->first) class="active"
                         @endif data-malfunction="{{$faultType->id}}">{{$faultType->type_name}}</div>
                @endforeach
            </div>
        </div>
        @if(! $chest->isTime())
            <div class="malfunction">
                <div class="malfunctionTitle">请选择您的处理方式 <span>*</span></div>
                <div class="malfunctionArea malfunctionAreaTwo" id="malfunctionAreaTwo">
                    <div class="replace" id="replace" data-type="1">更换至空闲格口</div>
                    @if($chest->isUser() )
                        <div data-type="2">顺延维修天数</div>
                        <p class="sunyan" style="display: none;">注：“顺延维修天数”需要待维修完成后进行审核</p>
                    @endif
                </div>
            </div>
        @endif
        <div class="malfunction">
            <div class="malfunctionTitle">请详细描述设备具体故障</div>
            <div class="malfunctionArea malfunctionAreaThree">
                <textarea id="text" name="fault_desc" form="form"></textarea>
            </div>
        </div>
        <div class="sub">
            <button id="submit">确认报修</button>
        </div>
    </div>
    @if($chest->isUser() )
        <!-- 选择空闲格口 -->
        <div class="cabinetOne" id="cabinetTwo" style="display: none;">
            <div class="wk">
                <div class="nk">
                    <div class="cabinetOneTitle">选择空闲格口</div>
                    <div class="ZYcabinet" num="{{$grips->count()}}">
                        <div class="itemList">
                            @foreach($grips as $grip)
                                <div class="item">
                                    <div class="itemNum">
                                        <p>{{$grip->grip_number}}</p>
                                        <div grips="{{$grip->id}}" num="{{$grip->grip_number}} "
                                             @if($grip->HumanStatus=='满') class="man" @endif>{{$grip->HumanStatus}}</div>
                                    </div>
                                    <div class="tianchong"></div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
    @endif
    @if($chest->isCompany() )
        <div class="workersOnedeviceService">
            <div class="cabinetOne" id="cabinetTwo" style="display: none;">
                <div class="wk">
                    <div class="selectDeviceNum">
                        <div class="selectDeviceNumTitle">输入网点设备号码</div>
                        <div class="searchDevice">
                            <input type="text" id="selectDeviceNumber" placeholder="请输入设备号">
                            <button id="searchDeviceBtn">确认</button>
                        </div>
                    </div>
                    <div class="nk">
                        <div class="cabinetOneTitle">选择空闲格口</div>
                        <!-- 有空闲格口 -->
                        <div class="ZYcabinet" id="addListItem" style="display: none;" num="">
                            <div class="itemList">

                            </div>
                        </div>
                        <!-- 没有空闲格口 以及 没有输入设备号时 -->
                        <div class="noZYcabinet" style="display: block;">
                            当前设备无空闲格口，请选择其他设备。
                        </div>
                    </div>
                    <div class="querengekou">
                        <button id="confirmReplace">确认更换</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <form id="form" action="{{route('device.repairForm',['id'=>$group->id])}}" method="post">
        {{ csrf_field() }}
        <input id="chest_id" type="hidden" name="chest_id" value="{{ $slug['1']}}">
        <input id="grip_id" type="hidden" name="grip_id" value="{{  $slug['2']}}">
        <input id="fault_desc" type="hidden" name="fault_desc">
        <input id="handle_way" type="hidden" name="handle_way" value="">
        <input id="fault_type" type="hidden" name="type_id" value="">
        <input id="update_grip_id" type="hidden" name="update_grip_id" value="">
    </form>

@endsection

@push('js')

    <script>
        /**
         * 获取设备
         *    动态添加设备
         */
        $("#searchDeviceBtn").click(function () {
            var selectDeviceNumber = $("#selectDeviceNumber").val();
            console.log(selectDeviceNumber);
            if (selectDeviceNumber == null || selectDeviceNumber == undefined || selectDeviceNumber == "") {
                mui.alert("设备号不能为空", "提示", "确认");
                return false;
            } else {

                $("#isShow").show();
                $.ajax({
                    url: "{{route('user.chestGrip')}}",
                    type: "POST",
                    data: {
                        '_token': '{{csrf_token()}}',
                        'number': selectDeviceNumber
                    },
                    success: function (res) {
                        $("#isShow").hide();
                        var str = "";
                        for (var i = 0; i < res.data.length; i++) {
                            var item = res.data[i];
                            str += '<div class="item"><div class="itemNum"><p>' + item.grip_name + '</p><div class="' + (item.status == 1 ? "man" : "") + '" grips="' + item.id + '" num="' + item.grip_number + '">' + (item.status == 0 ? "空" : "满") + '</div ></div><div class="tianchong"></div></div>';
                        }
                        // 动态添加 设备时候 调用 load 函数
                        $("#addListItem").attr("num", res.data.length).show().find(".itemList").html(str);
                        $(".noZYcabinet").css('display', 'none');
                        addListItemClick();
                    },
                    error: function (err) {
                        $("#isShow").hide();
                        mui.alert("获取设备失败,请刷新重试。", "错误提示", "确认");
                    }
                });
            }
        });

        function addListItemClick() {
            $("#addListItem .itemNum div").click(function () {
                var this_ = this;
                var num = $(this).attr("num");
                var clsName = $(this).prop("className");
                if (clsName == "man") {
                    mui.alert("此格口已有人使用。", "格口选择", "确定");
                } else {
                    mui.confirm("确认选择此格口?", "格口选择", ["取消", "确定"], function (res) {
                        if (res.index == 1) {
                            $("#replace").text("更换至空闲格口 -" + $(this_).attr("grips"));
                            $("#update_grip_id").val($(this_).attr("grips"));
                        }
                    })
                }
            });
        }

        $("#replace").click(function () {
            $("#cabinetTwo").show();
        });
        $(".wk").click(function (e) {
            var eleId = e.target.className;
            if (eleId == "wk") {
                $(".cabinetOne").hide();
            }
        });

        $("#malfunctionOne div").click(function () {
            var falutType = parseInt($(this).attr("data-malfunction"));
            $('#fault_type').val(falutType);
            $(this).addClass("active").siblings().removeClass("active");
        });

        $("#malfunctionAreaTwo div").click(function () {
            var handleWay = parseInt($(this).attr("data-type"));
            $('#handle_way').val(handleWay);
            if (handleWay == 2) {
                $(".sunyan").show();
            } else {
                $(".sunyan").hide();
            }
            $(this).addClass("active").siblings().removeClass("active");
        });
        $("#cabinetTwo .itemNum div").click(function () {
            var this_ = this;
            var num = $(this).attr("num");
            var clsName = $(this).prop("className");
            if (clsName == "man") {
                mui.alert("此格口已有人使用。", "格口选择", "确定");
            } else {
                mui.confirm("确认选择此格口?", "格口选择", ["取消", "确定"], function (res) {
                    if (res.index == 1) {
                        $('#update_grip_id').val($(this_).attr('grips'));
                        $("#replace").text("更换至空闲格口 -" + num);
                        $("#cabinetTwo").hide();
                    }
                })
            }
        });
        $("#submit").click(function () {
            var handleWay = $('#handle_way').val();
            var gripId = $('#grip_id').val();
            var faultType = $('#fault_type').val();
            var fault_desc = $('#text').val();
            $('#fault_desc').val(fault_desc);
            var update = parseInt($("#update_grip_id").val());

            if (handleWay == '1') {
                $('#update_grip_id').val(update);
            } else {
                $('#update_grip_id').val('0');
            }

            if (handleWay == null || handleWay == undefined) {
                mui.alert("请选择故障的处理方式", "提示", "确认");
            } else if (1 == handleWay && handleWay) {
                if (gripId == null || gripId == undefined) {
                    mui.alert("请选择要更换至的格口", "提示", "确认");
                    return false;
                }
            }
            if (faultType == null || faultType == undefined) {
                mui.alert("请选择故障类型", "提示", "确认");
                return false;
            }
            /*  mui.alert("感谢您的反馈, 我们会尽快维修。", "提交完成", "确认");*/
            $('#form').submit();
            return false;

        });
    </script>
@endpush
